<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Integrated Case Management System</title>
	<!-- ============================CSS link goes here============================ -->
	<!-- <link rel="stylesheet" href="css/globle.css"> -->
	<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
	<!-- Responsive -->
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
	<link rel="stylesheet" href="css/pure-skin-mine.css">
	<!-- <link rel="stylesheet" href="css/modal.css"> -->
	<link rel="stylesheet" href="css/decoration.css">
	<link rel="stylesheet" href="css/responsive.css">
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
	<link rel="stylesheet" href="css/buttons.css">
	<!-- ============================End of CSS links============================ -->

	<!-- ============================JS file goes here============================ -->
	<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<script src="js/getURLParameter.js"></script>
	<script src="js/AI1JavaScript.js" ></script>
	<script src="js/prePopulateText.js" ></script>
	<script src="js/jsResponsive.js"></script>
	<script src="js/dataExchangeAjax.js"></script>
	<script src="js/jsButton.js"></script>
	<script src="js/autocomplete.js"></script>
	<!-- NProgress -->
	<link rel="stylesheet" href="js/nprogress/nprogress.css">
	<script src="js/nprogress/nprogress.js"></script>

	<script>
		jQuery(document).ready(function() {
			$('#lastUpdateDate').html(today);
			$('#lastUpdateDateTime').val(today);
			preFillForm();
		});

		
	</script>

</head>
<body>
	<div id="clearScripts" class="prePopu" onclick="clearScripts()">
	</div>
	<header class="row-fluid main">
		<div class="row-fluid">
			<div class="span3 offset9">
				<img id="govLogo" src="images/gov-logo.png" alt="Singapore Government verified" ></img>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<img id="banner" src="" alt="Integrated Case Management System" class="span8" href="#">
			</div>
		</div>
		<div class="row-fluid">
			<nav class="navbar">
				<div class="navbar-inner">
					<ul class="nav nav-pills">
						<li><a href="inbox(1).html">Inbox</a></li>
						<li><a href="#">Reports</a></li>
						<li><a href="create-case(1).html">New Case</a></li>
					</ul>
					<!-- START:login control -->
					<ul class="nav pull-right">
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg"></i>&nbsp;&nbsp;<span id="username">Litash</span>(<span id="loginType" style="font-weight:600;"></span>)&nbsp;&nbsp;<i class="fa fa-sort-asc"></i></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Account</a></li>
                          <li><a href="#">Change Password</a></li>
                          <li><a href="#">Update Profile Info</a></li>
                          <li class="divider"></li>
                          <li><a href="login.html" id="btnLogout">Log out</a></li>
                        </ul>
                      </li>
                    </ul>
                    <!-- END:login control -->
				</div>
			</nav>
		</div>
		<div class="row-fluid">
			<h1 class="span4" onclick="textScripts()">Update Case</h1>
			<hr class="thickLine">
		</div>
	</header>
	<div class="main container-fluid">

<!-- 	<form action="api/Case/UpdateCase" method="post"> -->
		<div class="row-fluid">
			<div class="span6">
				<div class="row-fluid">	
					<div class="span4"><label for="#caseID">ID</label></div>
					<div class="span8">
						<span id="caseID"></span>
					</div>
				</div>
			</div>
			<div class="span6">
				<div class="row-fluid">	
					<div class="span4"><label for="#caseStatus">Status</label></div>
					<div class="span8">
						<select name="caseStatus" id="caseStatus">
							<option value="Open">Open</option>
							<option value="Pending">Pending</option>
							<option value="Closed">Closed</option>
						</select>
					</div>
				</div>
			</div>			
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agencyCaseID">Agency Case ID</label>
				</div>
				<div class="span8">
					<span id="agencyCaseID">8523156165442164</span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#fbDate">Incident Date</label>					
				</div>
				<div class="span8">
					<input type="text" class="datepicker" name="feedbackDate" id="fbDate" >
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#recDate">Received Date</label>
				</div>
				<div class="span8">
					<input type="text" class="datepicker" name="receivedDate" id="recDate">
				</div>
			</div>	
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#dueDate">Due Date</label>
				</div>
				<div class="span8">
					<input type="text" class="datepicker" name="dueDate" id="dueDate">
				</div>
			</div>
			<div class="span6" id="closedDateDiv">
				<div class="span4">
					<label for="#closedDate">Closed Date</label>
				</div>
				<div class="span8">
					<input type="text" class="datepicker" name="closedDate" id="closedDate">
				</div>
			</div>
		</div>
		<hr class="slimLine">
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">			
					<label for="#subject">Subject Title</label>
				</div>
				<div class="span8">
					<input type="text" id="subject" name="subject" class="tbx100" >
				</div>
			</div>
			<div class="span6"></div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#feedbackType">Feedback Type</label>
				</div>
				<div class="span8">
					<select name="feedbackType" id="feedbackType">
						<option value="Complaint">Complaint</option>
						<option value="Urgent">Urgent</option>
						<option value="Appeal">Appeal</option>
					</select>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#channel">Channel</label>
				</div>
				<div class="span8">
					<select name="channel" id="channel">
						
						<option value="CRM">CRM</option>
						<option value="Phone call">Phone call</option>
					</select>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#caseDesc">Description</label>
			</div>
			<div class="span10" id="caseDescDiv">
				<textarea class="bigTextarea" name="description" class="bigTextarea" id="caseDesc" placeholder="Enter case description here..."></textarea>
			</div>		
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#autoComp-agency">Agency</label>
				</div>
				<div class="span8">
					<select id="autoComp-agency" class="autoComp-agency" name="caseOwner">
						<option value="AVA">AVA</option>
						<option value="HDB">HDB </option>
						<option value="LTA">LTA</option>
						<option value="NEA">NEA</option>
						<option value="NPARKS">NPARKS</option>
						<option value="PUB">PUB</option>
						<option value="SPF">SPF</option>
					</select>
				</div>
			</div>
			<!-- START: Text Analytic Widget (button and bars) -->
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label>Suggested Agency</label>
					</div>
					<div class="span8">
						<button type="submit" class="pure-button pure-button-primary">Analyze Description&nbsp;&nbsp;&nbsp;<i id="icon-loading" class="fa fa-spinner fa-spin"></i></button>
					</div>
				</div>
				<div id="progressBarsDiv" class="row-fluid">	
					<div class="row-fluid">
						<div class="span6">
							<span>Probability:</span>
						</div>
						<div class="span6"></div>
					</div>
					<div class="row-fluid">
						<div class="span4">
							<span>LTA</span>
						</div>
						<div class="span8">
							<div class="progressBar" id="progressBar1">
								<div></div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span4">
							<span>NEA</span>
						</div>
						<div class="span8">
							<div class="progressBar" id="progressBar2">
								<div></div>
							</div>	
						</div>
					</div>
					<div class="row-fluid">
						<div class="span4">
							<span>PUB</span>
						</div>
						<div class="span8">
							<div class="progressBar" id="progressBar3">
								<div></div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<p style="color: #666; font-family: Calibri; font-size: 14px; text-align: left; margin:0px;">This case most likely belongs to: <span id="recomAgency" style="color:#0D8EFC;font-weight:600"></span></p>
					</div>
				</div>
			</div>	
			<!-- END: Text Analytic Widget (button and bars) -->	
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#autoComp">Category Search</label>
				</div>
				<div class="span8">	
					<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
					<input type="text" class="autoComp tbx100" id="autoComp" placeholder="Enter keyword for categories...">
				</div>
			</div>
			<div class="span6"></div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#autoComp-category">Category</label>
				</div>
				<div class="span8">
					<input type="text" id="autoComp-category" class="autoComp-category" name="category" readonly>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#autoComp-subCate">Sub Category</label>
				</div>
				<div class="span8">
					<input type="text" id="autoComp-subCate" class="autoComp-subCate" name="subCategory1" readonly>		
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#address">Address</label>
				</div>
				<div class="span8">
					<textarea name="customerAddress" id="address" style="height:80px;"></textarea>
				</div>
			</div>

			<div class="span6">
				<div class="span4">
					<label for="#postalCode">Postal Code</label>
				</div>
				<div class="span8">
					<input type="text" name="postalCode" id="postalCode"></input>			
				</div>

			</div>
		</div>
		
		<div class="row-fluid" style="display:none">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateAgency">Last Update Agency</label>
				</div>
				<div class="span8">
					<input type="text" name="lastUpdateAgency" id="lastUpdateAgency" readonly="true">
				</div>
			</div>
			<div class="span6" style="display:none">
				<div class="span4">
					<label for="#lastUpdateDate">Last Update Date</label>		
				</div>
				<div class="span8">	
					<input type="text" name="lastUpdateDateTime" id="lastUpdateDateTime" readonly="true">
				</div>
			</div>
		</div>
		<div class="row-fluid" id="closureDescDiv">
			<div class="span2">
				<label for="#closureDesc">Closure Description</label>
			</div>
			<div class="span10">
				<textarea name="closureDesc" id="closureDesc" class="bigTextarea"></textarea>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#uploadedImg">Uploaded Image</label>
				</div>
				<div class="span8"><img id="uploadedImg" src="" alt="Uploaded image"></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="">Attachments</label>
				</div>
				<div class="span8">
					<div class="row-fluid">
						<table>
							<tr>
								<td class="fakeLinkText">12314145123341.pdf</td>
							</tr>
							<tr>
								<td class="fakeLinkText">1341324647.doc</td>
							</tr>
						</table>
					</div>
					<div class="row-fluid">
						<input type="file">
						<button type="button" class="pure-button pure-button-primary">Upload Attachment&nbsp;&nbsp;<i class="fa fa-paperclip"></i></button>
					</div>
				</div>
			</div>
		</div>
		<div class="rowfluid">
			<h2>Customer information</h2>
			<hr class="slimLine">
		</div>

		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#custName">Customer Name</label>
				</div>
				<div class="span8">
					<input type="text" name="custName" id="custName"></input>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#phone">Mobile Number</label>
				</div>
				<div class="span8">
					<input type="text" name="phone" id="phone"></input>	
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>ID Type</label>
				</div>
				<div class="span8">
					<select name="" id="">
						<option value="NRIC">NRIC</option>
						<option value="FIN">FIN</option>
						<option value="Passport">Passport</option>
					</select>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Home Number</label>
				</div>
				<div class="span8">
					<input type="text">
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#NRIC">ID Number</label>
				</div>
				<div class="span8">
					<input type="text" name="NRIC" id="NRIC"></input>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Office Number</label>
				</div>
				<div class="span8">
					<input type="text">
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#email">Email</label>
				</div>
				<div class="span8">
					<input type="text">
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#mCustID">Mobile Customer ID</label>
				</div>
				<div class="span8">
					<input type="text" name="email" id="mCustID" readonly="true"></input>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Prefered Mode of Contact</label>
				</div>
				<div class="span8">
					<select name="" id="">
						<option value="">No Preference</option>
						<option value="">Mobile No</option>
						<option value="">Home No</option>
						<option value="">Office No</option>
					</select>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Prefered Time of Contact</label>
				</div>
				<div class="span8">
					<select name="" id="">
						<option value="">No Preference</option>
						<option value="">8:00 - 12:00</option>
						<option value="">12:00 - 17:00</option>
						<option value="">After 17:00</option>
					</select>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<h2>Linked Cases</h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid">
			<div class="span10 offset1 jointInvolvedTable">
				<table id="detailInvolvedAgencyTable">
					<colgroup>
						<col span="1" style="width:30%;">
						<col span="1" style="width:30%">
						<col span="1" style="width:30%;">
						<col span="1" style="width:10%;">
					</colgroup>
					<thead>
						<tr>
							<th>Case ID</th>
							<th>Agency</th>
							<th>Relationship</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>201306251423</td>
							<td>NEA</td>
							<td>Related</td>
							<td>
								<i class="fa fa-times-circle fa-lg clickable cancelLink" title="Remove Link"></i>
							</td>
						</tr>
						<tr>
							<td>201308122256</td>
							<td>AVA</td>
							<td>Related</td>
							<td>
								<i class="fa fa-times-circle fa-lg clickable cancelLink" title="Remove Link"></i>
							</td>
						</tr>
						<tr>
							<td>201310231546</td>
							<td>NEA</td>
							<td>Duplicated</td>
							<td>
								<i class="fa fa-times-circle fa-lg clickable cancelLink" title="Remove Link"></i>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- <div id="removeConfirmation">
				<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;Confirm remove the linked case?</p>
			</div> -->
		</div>

		<!--Child case part-->
		<div id="childCasesPart">
			<div class="row-fluid">
				<h2>Child Cases</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div id="childCaseTableWrap">
					<table id="childCaseTable" class="childTable">
						<thead>
							<tr>
								<th>Child Case ID</th>
								<th>Subject Title</th>
								<th>Category</th>
								<th>Case Status</th>
								<th>Routing Date</th>
								<th>Due Date</th>
								<th>Agency</th>
							</tr>
						</thead>
						<tbody>
							<!--child cases are added in here-->
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- joint agencies part-->
		<div id="jointAgencyPart">
			<div class="row-fluid">
				<h2 class="subTitle">Agencies Involved</h2>
				<hr class="slimLine">
			</div>
			<div id="jointAgencyTableWrap">
				<table id="jointAgencyTable" class="agencyTable">
					<thead>
						<tr>
							<th id="name" style="width:40%;">Agency Name</th>
							<th id="lead" style="width:20%;">Lead Agency</th>
							<th id="status" style="width:40%;">Status</th>
						</tr>
					</thead>
					<tbody>
						<!--child cases go here-->
					</tbody>
				</table>
			</div>
		</div>

		<!-- START: More Option panels -->
		




		<!-- END: More Option panels -->

		<!-- buttons -->
		<div class="row-fluid" style="min-height:20px;"></div>
		<div class="row-fluid">
			<div class="span4 offset8">
			<button type="button" id="btnUpdateCase" class="pure-button pure-button-primary tailButton" onclick="updateCaseInfo()">Update</button>
				<!--button type="button" class="pure-button pure-button-secondary tailButton">More Options</button-->
				<button type="button" id="btnUpdateCase" class="pure-button pure-button-primary tailButton" onclick="updateCaseInfo()">Update</button>
			</div>
		</div>
		<!-- </form> --><!-- end of update form -->
	</div>
<div style="height:100px;"></div>
	<footer class="row-fluid">
		<span id="copyright">&copy; Copyright 2013, All rights Reserved.</span>
		<span id="PSTCD">Privacy Statement | Terms &amp; Conditions | Disclaimer</span>
	</footer>

</body>
</html>